<template>
    <div v-if="value" class="personInfoItem">
        <div>
            <div class="nameInfo" @click="handleViewUser">
                <div class="name">{{ value.NAME }}</div>
                <div class="apostWrapper" v-if="apostLevel">
                    <van-tag v-if="apostLevel == '校领导'" style="margin-left: 10px;" color="red">{{ apostLevel }}</van-tag>
                    <van-tag v-else style="margin-left: 10px;" color="#1989fa">{{ apostLevel }}</van-tag>
                </div>
                <div class="stateWrapper">
                    <van-tag type='primary'  :color="stateColor">{{ stateName }}</van-tag>
                </div>
            </div>
            <div class="item" @click="handleViewUser">
                <div class="itemIcon">
                    <van-icon name="manager-o" />
                </div>
                <div class="label">工号</div>
                {{ value.STAFF_ID }}
            </div>

            <div class="item" @click="handleViewUser">
                <div class="itemIcon">
                    <van-icon name="home-o" />
                </div>
                <div class="label">单位</div>
                {{ value.COLLEGE }}
            </div>
            <div class="item" @click="handleViewUser">
                <div class="itemIcon">
                    <van-icon name="cluster-o" />
                </div>
                <div class="label">科室</div>
                {{ value.DEPART }}
            </div>
            <div class="item">
                <div class="itemIcon">
                    <van-icon name="phone-o" />
                </div>
                <div class="label">手机</div>
                <a class="cellphone" :href="'tel:' + value.CELL_PHONE">{{ value.CELL_PHONE }}</a>
            </div>
        </div>

        <div class="showDetail" v-if="false">
            <span v-if="linkText">{{ linkText }}</span>
            <span v-else>查看进出记录</span>
            <van-icon name="arrow" />
        </div>


        <div class="showDetail detailBtns" v-if="link">
            <van-button size="small" color="#1989fa" class="optBtns" @click="handleViewUser">查看详情</van-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { userSchoolLeaderStore } from '@/stores';
import type {PersonInfo } from '@/types/common';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
interface CarInfoItemProps {
    value?: PersonInfo
    link?: boolean
    linkText?: string
}

const props = defineProps<CarInfoItemProps>()
const leaderStore = userSchoolLeaderStore();
const handleViewUser = () => {
    router.push('/query/person/personAllInfoDetail?id=' + props.value?.STAFF_ID);
}

const apostLevel = computed(() => {

    //根据工号获取校领导
    if (props.value?.STAFF_ID) {
        var index = leaderStore.leaderList.indexOf(props.value?.STAFF_ID);
        if (index != -1) {
            return "校领导"
        }
    }


    if (props.value?.APOSTLEVEL_ID == '41' || props.value?.APOSTLEVEL_ID == '43') {
        return "正职"
    }

    if (props.value?.APOSTLEVEL_ID == '42' || props.value?.APOSTLEVEL_ID == '44') {
        return "副职"
    }


    return false;
})

const stateName = computed(() => {
    var id = props.value?.STATUS_ID;

    if (props.value?.STAFF_ID?.length == 6) {
        switch (id) {
            case '01':
                return '见习期';
            case '02':
                return '在岗';
            case '03':
                return '在站';
            case '11':
                return '公派出国';
            case '12':
                return '因私出国';
            case '13':
                return '事假';
            case '14':
                return '病假';
            case '15':
                return '产假';
            case '16':
                return '待岗';
            case '17':
                return '停薪留职';
            case '19':
                return '其他离岗';
            case '21':
                return '离休';
            case '22':
                return '退休';
            case '31':
                return '辞职';
            case '32':
                return '辞退';
            case '33':
                return '调离';
            case '34':
                return '死亡';
            case '35':
                return '出站';
            case '36':
                return '期满';
            case '37':
                return '终止合同';
            case '39':
                return '其他离职';

        }
    }else{
         switch (id) {
            case '01':
                return '在期';
            default:
                return '期满';
        }
    }

})

const stateColor = computed(()=>{
    
     var id = props.value?.STATUS_ID;

    if (props.value?.STAFF_ID?.length == 6) {
        switch (id) {
            case '01':               
            case '02':                
            case '03':                
            case '11':                
            case '12':                
            case '13':                
            case '14':                
            case '15':                
            case '16':
                return '#004e9b';                
             default:
                return 'gray';

        }
    }else{
         switch (id) {
            case '01':
                return '#004e9b';
            default:
                return 'gray';
        }
    }

})

</script>
<style lang="less" scoped>
.personInfoItem {
    .item {
        margin-bottom: 0.5em;
        display: flex;

        .itemIcon{
            margin-right: 2px;
        }

        .label {
            width: 50px;
            text-align: justify;
            text-align-last: justify;
            margin-right: 10px;
            color: #888;
        }

        .label::after {
            content: ':';
        }

        .remark {
            width: 100px;
            flex-grow: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        



    }

    .showDetail {
        border-top: 1px solid #dfdfdf;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
    }

    .showDetail.detailBtns {
        margin-top: 5px;
        padding-top: 5px;
    }

    .detailBtns {
        display: flex;
        justify-content: right;
        margin-bottom: -10px;

        .optBtns {
            margin-right: 10px;
        }
    }

    .nameInfo {
        font-size: 17px;
        font-weight: bold;
        display: flex;
        margin-bottom: 10px;
        padding-left: 20px;

        .stateWrapper {
            margin-left: 10px;
            display:flex;
            align-items: center;
        }
        .apostWrapper{
            display:flex;
            align-items: center;
            
        }
    }
}
</style>